<template>
  <ga-drawer
    width="40%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    @closed="handleCancel"
    :footer="false"
  >
    <template #title> IP变更记录【{{ title }}】</template>
    <div class="ip_log">
      <ga-timeline mode="left" labelPosition="relative">
        <ga-timeline-item
          position="bottom"
          dot-type="hollow"
          v-for="(item, index) in logList"
          :key="index"
          :dotColor="index % 2 === 0 ? '#52C419' : ''"
        >
          <template #label>{{ item?.createTime || "-" }}</template>
          <div class="content flex">
            <p class="opt_name">
              使用人<span>{{ item?.createBy || "-" }}</span>
            </p>
            <div class="content_detail flex">
              <div style="color: #2c406899; width: 40px">详情</div>
              <p>
                {{ item?.description || "-" }}
              </p>
            </div>
          </div>
        </ga-timeline-item>
      </ga-timeline>
      <ga-empty style="margin-top: 30vh" v-if="!logList.length" />
    </div>
  </ga-drawer>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getIpLogList } from "@/api/layer2subnet";

const visible = ref(false);
const title = ref("");
const logList = ref([]);

const open = (val) => {
  visible.value = true;
  title.value = val?.ipAddress;
  fetchLogData();
};
// 获取log
const fetchLogData = async () => {
  try {
    const { data } = await getIpLogList({ limit: -1, ip: title.value });
    logList.value = data.items;
  } catch (err) {
    console.log(err);
  }
};
// 处理方法
const handleCancel = () => {
  visible.value = false;
  logList.value = [];
};
// onMounted(() => {
//   fetchLogData();
// });
defineExpose({ open });
</script>

<style lang="scss" scoped>
.ip_log {
  .content {
    span {
      color: #2c4068;
      padding-left: 8px;
    }
    .opt_name {
      min-width: 127px;
      color: #2c406899;
    }
    .content_detail {
      padding-left: 16px;
      p {
        flex: 1;
      }
    }
  }
}
:deep(.garco-timeline-item-content) {
  background: #f7f9fc;
  padding: 8px;
}
:deep(.garco-timeline-item-dot) {
  width: 9px;
  height: 9px;
  left: -1px;
}
:deep(.garco-timeline-item-label-relative > .garco-timeline-item-label) {
  width: 140px;
}
</style>
